<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>CSS 样式</title>
    <style>
        .hz1 {
            margin: 0 auto;
            width: 50px;
            height: 50px;
            background-color: greenyellow;
            border: 1px solid red;
            /* transition: 变化曲线 花费时间  运动曲线  何时开始; */
            transition: width 3s ease 0s;
            /* 定义宽度变化 耗时3秒 使用ease的运动曲线 0s的时候触发 */
        }
        
        .hz1:hover {
            width: 1200px;
            filter: blur(3px);
            border-radius: 25px;
        }
        
        .hz2 {
            margin: 0 auto;
            width: 50px;
            height: 50px;
            background-color: pink;
            border: 1px solid black;
            transition: width 3s ease 0s, height 2s ease-in-out 1s;
        }
        
        .hz2:hover {
            width: 1200px;
            height: 500px;
            background-color: skyblue;
            filter: blur(3px);
        }
    </style>
</head>

<body>
    <div class="hz1">

    </div>
    <div class="hz2">

    </div>
</body>

</html>